<template>
  <div class="home">
    <SearchBar @search="fnHandleSearch" />
    <el-skeleton :loading="loading" animated>
      <template #default>
        <AnimeList :aAnimeDatas="aSearchDatas" />
      </template>
      <template #template>
        <el-row :gutter="20">
          <el-col
            v-for="i in 6"
            :key="i"
            :xs="12"
            :sm="8"
            :md="6"
            :lg="4"
            :xl="3"
          >
            <el-skeleton-item
              variant="image"
              style="width: 100%; height: 200px"
            />
            <el-skeleton-item
              variant="text"
              style="width: 80%; margin-top: 10px"
            />
          </el-col>
        </el-row>
      </template>
    </el-skeleton>
    <el-skeleton :loading="loading" animated>
      <template v-for="data in aAnimeDatas" :key="data.id">
        <SpecialView :aSpecialData="data" />
      </template>
    </el-skeleton>
  </div>
</template>

<script setup>
import { useDramaStorage } from "@/utils/storage";
import SearchBar from "@/components/SearchBar.vue";
import AnimeList from "@/components/AnimeList.vue";
import SpecialView from "@/views/SpecialView.vue";
import { storeToRefs } from "pinia";
// import { computed } from 'vue';
// const aAnimeDatas = ref([]);
const sSearchStrs = ref([]);
const loading = ref(false); // 加载状态
const DramaStorage = useDramaStorage();
const { aAnimeDatas, bLoading } = storeToRefs(DramaStorage);
const aSearchDatas = computed(() => {
  if (sSearchStrs.value.length === 0) {
    return aAnimeDatas.value; // 如果没有关键字，返回全部数据
  }
  console.log(sSearchStrs.value);

  return aAnimeDatas.value.filter((oData) => {
    // 将 sName、sDescription、sLabel 拼接成一个字符串
    const content = `${oData.sName} ${oData.sDescription} ${oData.sLabel}`;
    console.log(content);

    // 检查是否包含所有关键字（逐个字符）
    return sSearchStrs.value.every((sStr) => content.includes(sStr));
  });
});

// 处理搜索事件
const fnHandleSearch = (keywords) => {
  loading.value = true; // 显示加载状态

  // 模拟搜索延迟（可选）
  setTimeout(() => {
    // 将输入字符串拆分为单个字符
    sSearchStrs.value = Array.from(keywords); // 将字符串拆分为字符数组
    loading.value = false; // 隐藏加载状态
  }, 300); // 300ms 的延迟，模拟搜索过程
};
</script>

<style scoped>
.home {
  padding: 20px;
}
</style>